<template>
    <view class="content">
        <view class="uni-form1">
            <uni-forms ref="rulesform" :modelValue="formData" :rules="rules" border label-width="160rpx"
                label-align="right">
                <uni-forms-item :label="$t('用户名')" name="name">
                    <uni-easyinput :inputBorder="false" class="uni-mt-5" trim="all" v-model="formData.name"
                        :placeholder="$t('请输入用户名')" :clearable="false"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item :label="$t('手机号')" name="phone">
                    <uni-easyinput :inputBorder="false" class="uni-mt-5" trim="all" v-model="formData.phone"
                        :placeholder="$t('请输入手机号')" :clearable="false"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item :label="$t('密码')" name="password">
                    <uni-easyinput :inputBorder="false" class="uni-mt-5" trim="all" v-model="formData.password"
                        :placeholder="$t('请输入密码')" :clearable="false"></uni-easyinput>
                </uni-forms-item>
            </uni-forms>
        </view>
        <uv-button :custom-style="submitButton" :text="$t('保存')" @click="submit"></uv-button>
    </view>
</template>
  
<script setup lang="ts">
import api, { } from '@/api';
import type { Iuser } from '@/interface';
import { submitButton } from '@/util/style';
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted, inject, type Ref } from 'vue'
import { useI18n } from 'vue-i18n';

const $t = useI18n().t

const rulesform = ref()

const refresh = inject<Function>('refresh')
const user = inject<Ref<Iuser>>('user')


const formData = ref<{ name?: string, phone?: string, password?: string }>({
    name: '',
    phone: '',
    password: '',
})

const rules = {
    phone: {
        rules: [
            {
                required: true,
                errorMessage: $t('请输入手机号'),
            },
        ],
    },
    name: {
        rules: [
            {
                required: true,
                errorMessage: $t('请输入手机号'),
            },
        ],
    },
}







onLoad((option) => {
    formData.value.name = user?.value?.name
    formData.value.phone = user?.value?.phone
})




function submit(e: any) {
    rulesform.value?.validate().then(() => {
        api('/wechat/index/userupdate', formData.value).then(() => {
            uni.showToast({
                title: $t('修改成功'),
                duration: 2500
            })
            if (refresh) {
                refresh()
            }
            uni.navigateBack()
        }).catch(f => {
            console.log(f)
            uni.showToast({
                icon: 'error',
                title: f,
                duration: 2000
            })
        })
    }).catch((err: any) => {
        console.log(err)
    })

}



onMounted(() => {
})

</script>
  
<style scoped>
.content {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.uni-form-item .label {
    padding: 20rpx 0;
}

.uni-form1 {
    width: 100vw;
    margin-bottom: 24rpx;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
}


.uni-mt-5 {
    width: 75vh;
}

.radio-group {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 40rpx;
    padding-left: 10px;

}

.header {
    font-family: PingFangSC;
    color: #333333;
    font-weight: 600;
    font-size: 36rpx;
    margin-top: 1.5vh;

}

.header-info {
    font-family: PingFangSC;
    color: #333333;
    font-weight: 400;
    font-size: 26rpx;
    margin-top: 1vh;
    margin-bottom: 3.5vh;
}

.border-1 {
    border: 1px solid #aaaaaa;
}

.privacy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 20rpx;
    padding-left: 20rpx;
    flex: 1;
}

.a-privacy {
    color: var(--color-primary);
}

.verifyCodeimage {
    width: 160rpx;
    height: 70rpx;
}
</style>
  